<template>
  <div class="view">
    <h2 class="title">主题精选</h2>
    <ul class="tabs">
      <li
        v-for="(item,i) in tabsList"
        :key="i"
        :class="{'is_this' : i == count , 'afRight':true}"
        @mousemove="onTabs(i)"
      >{{item}}</li>
    </ul>
    <template v-for="(item) in hotDestinationList">
      <ul class="contentGroup" :key="item.countyId" v-if="count == item.countyId">
        <li class="quarterContent" v-for="(items) in item.provinceList" :key="items.provinceId">
          <p class="main">
            <span
              v-for="(itemP,i) in items.province"
              :key="i+'p'"
              :class="{'underline': !items.scope}"
            >{{itemP}}</span>
          </p>
          <span style="width: 370px;display: inline-block;">
            <a
              href="javascript:;"
              v-for="(itemC,i) in items.cityList"
              :key="i+'c'"
              class="branch"
            >{{itemC}}</a>
          </span>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      tabsList: [],
      count: 0,
    };
  },
  computed:{
    ...mapState(['hotDestinationList'])
  },
  methods: {
    getData() {
      let tabs = [
        "国内",
        "港澳台",
        "日本",
        "东南亚",
        "南亚 西亚",
        "欧洲 美洲",
        "澳洲 非洲"
      ];
      this.tabsList = tabs;
      this.$store.dispatch('reqHotDestination')
      
    },
    onTabs(i) {
      this.count = i;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
.view {
  width: 1000px;
  margin: auto;
  padding: 40px 0;

  .title {
    text-align: center;
    font-weight: normal;
    margin: 25px;
  }

  .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    cursor: pointer;

    .is_this {
      color: orange;
      position: relative;

      &:before {
        content: '';
        width: 100%;
        height: 3px;
        background-color: orange;
        position: absolute;
        bottom: -12px;
      }
    }

    .afRight {
      position: relative;
      margin: 0 30px;

      &:after {
        content: '';
        width: 1px;
        height: 16px;
        background-color: #eee;
        position: absolute;
        right: -27px;
        top: 3px;
      }

      &:last-child {
        &:after {
          content: '';
          width: 0;
          height: 0;
        }
      }
    }
  }

  .contentGroup {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .quarterContent {
      padding: 25px 0;
      border-top: 1px dashed #ccc;
      width: 470px;
      display: flex;

      &:nth-of-type(1) {
        border: none;
      }

      &:nth-of-type(2) {
        border: none;
      }

      .main {
        display: inline-block;
        width: 100px;

        .underline {
          text-decoration: underline;
          margin-right: 5px;
          cursor: pointer;
        }
      }

      .branch {
        color: #999;
        margin-right: 15px;
        font-size: 14px;

        &:hover {
          color: orange;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>